<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="/public/images/favicon.ico" type="image/x-icon">
    <title th:text="${session.lang == 'en' ? menu.titleEn : menu.title}"></title>
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script type="text/javascript" src="/public/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="/public/js/bootstrap.js"></script>
</head>
<body data-theme-url="" data-device="desktop"
      class="home page-template page-template-page-templates page-template-page-home page-template-page-templatespage-home-php page page-id-5 language-en">
<div class="loadingBg">
    <div class="loadinglg">
        <div class="ldlogo"></div>
        <div class="ldbg"></div>
    </div>
</div>
<div class="scroller-wrapper" scrollbar>
    <div class="component-transition-line">
        <div class="transition-line__wrapper">
            <div class="transition-line__line">
                <svg class="transition-line__svg" x="0px" y="0px" viewBox="0 0 1920 3105">
                    <path fill="none" stroke-width="4"
                          d="M861.1,1200c120.8-257.7,320.9-290.4,379.8-527.1c30-120.7-0.7-237.2-5.8-255.8 c-35.3-128.4-114.8-193.9-158-232C1036.8,149.8,960.6,82.7,881.7-4.5"/>
                    <path fill="none" stroke-width="4"
                          d="M695,3102c5.5-82.9,49.5-158,86.1-221.6c90.3-157,135.5-235.5,148-265.1c18.3-43.5,91.8-217.8,72-422.5 c-7.1-72.8-39.4-160.8-104-336.9c-70.6-192.2-84.4-195.4-100-265.1c-33.6-149.6-3.1-247.7,64-390.8"/>
                </svg>
            </div>
        </div>
    </div>
    <!--#include file="/views/component/header.html"-->
    <div th:replace="header :: header"></div>
    <main id="barba-wrapper">
        <section class="barba-container" data-namespace="home">
            <link rel="stylesheet" href="/public/css/bootstrap.css" type="text/css" media="all"/>
            <link rel="stylesheet" href="/public/css/min.css">
            <link rel="stylesheet" href="/public/css/style.css" type="text/css" media="all"/>
            <link rel="stylesheet" href="/public/css/pagenavi-css.css" type="text/css" media="all"/>
            <div class="misc-sticky || js-scroll js-printed-checker">
                <div class="misc-sticky__wrapper wrapper--left">
                    <div class="component-nav-vertical">
                        <div class="nav-vertical__list"></div>
                        <div class="nav-vertical__arrow">
                            <button class="arrow-line arrow--bottom"><span></span> <span></span></button>
                            <button class="arrow-line arrow--top"><span></span> <span></span></button>
                        </div>
                    </div>
                </div>
                <div class="component-tabs cp">
                    <div class="tabs__wrapper">
                        <div class="nav1" th:each="s, status: ${series}">
                            <div class="btn btn--primary btn--large btn--light-2" data-toggle="collapse" th:data-target="'#pro' + ${status.index}">
                                <div>
                                    <div class="btn__text" th:data-text="${session.lang == 'en' ? s.titleEn : s.title}">
                                        <span th:text="${session.lang == 'en' ? s.titleEn : s.title}">光学元件零组件</span>
                                    </div>
                                </div>
                            </div>
                            <div class="nav2 collapse" th:id="'pro' + ${status.index}" th:if="${s.children != null && !s.children.isEmpty()}">
                                <div class="item1" th:each="ss: ${s.children}"><a th:href="'/product_list' + '_' + ${ss.id}" th:text="${session.lang == 'en' ? ss.titleEn : ss.title}">镜头</a></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="banner">
                <div class="img"><img th:src="${companyProfile.productBanner}" alt="aaa"></div>
            </div>
            <div class="products">
                <div class="container">
                    <div class="tit">
                        <div class="cn" th:text="${menu.title}">宝石显微镜</div>
                        <div class="en" th:text="${menu.titleEn}"></div>
                    </div>
                    <div class="list">
                        <div class="item" th:each="p: ${products}">
                            <div class="img">
                                <a th:href="'/product_detail_' + ${p.id}"><img th:src="${p.img}" alt=""></a>
                            </div>
                            <div class="name" th:text="${session.lang == 'en' ? p.titleEn : p.title}">NGI系列宝石显微镜</div>
                            <div class="more"><a th:href="'/product_detail_' + ${p.id}">- 了解详情 -</a></div>
                        </div>
                    </div>
                    <input type="hidden" id="page1" value="2">
                    <div class="loadmore js-printed-checker">
                        <a href="javascript:;" class="more btn btn--primary btn--large btn--light" id="more1"
                           data-status="1">
                            <div>
                                <div class="btn__text" data-text="加载更多"><span>加载更多</span></div>
                                <div class="btn__line arrow-line"><span></span> <span></span></div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <script>
                function insertDiv(data) {
                    var information = $("#pro");
                    var html = '';
                    for (var i = 0; i < data.length; i++) {
                        html += '<div class="item"><div class="img"><a href="/views/product-list.html?pid=' + data[i].ID +
                            '"><img src="https://yongxin.yxopt.com/upload/' + data[i].SMALLPIC +
                            '" alt=""></a></div><div class="name">' + data[i].PRONAME +
                            '</div><div class="more"><a href="/views/product-detail.html?pid=' + data[i].ID + '">- 了解详情 -</a></div></div>';
                    }
                    information.append(html);
                    $("#more1").attr("data-status", "1");
                }
            </script>
            <!--#include file="/views/component/footer.html"-->
            <div th:replace="footer :: footer"></div>
            <style>
                #cnzz_stat_icon_1280183050 {
                    margin-left: 20px;
                }
            </style>
        </section>
    </main>
</div>
</body>
</html>